import React, { Component } from 'react'
import { NavBar, Icon, Item, Image, Button } from 'components'
import { msg } from '../../../utils'

export default class ReceivedDetail extends Component<any, any> {

    public state = {
        logisticsInfo: {
            status: '您的订单在【广州东万皇甫分拣中心】分拣完成',
            time: '2018-08-02 15:00:20'
        },
        userInfo: {
            userName: '瑶瑶',
            userPhone: '15112326520',
            userAddress: '地址：四川成都市武侯区天府大道东方希望天祥广场A座1119'
        },
        goodsInfo: {
            shopName: '中恒自营店',
            goodsData: [
                {
                    goodsName: '迪桑娜2018年新款夏季真皮女包单迪桑娜2018年新款夏季真皮女包单...',
                    goodsSpecifications: '颜色：黑白花色  尺码：S',
                    goodsPrice: 10,
                    goodsHd: 820,
                },
                {
                    goodsName: '迪桑娜2018年新款夏季真皮女包单迪桑娜2018年新款夏季真皮女包单...',
                    goodsSpecifications: '颜色：黑白花色  尺码：S',
                    goodsPrice: 10,
                    goodsHd: 820,
                },
                {
                    goodsName: '迪桑娜2018年新款夏季真皮女包单迪桑娜2018年新款夏季真皮女包单...',
                    goodsSpecifications: '颜色：黑白花色  尺码：S',
                    goodsPrice: 10,
                    goodsHd: 820,
                }
            ],
        },
        orderInfo: {
            orderId: '77989741521320',
            orderCreateTime: '2018-08-01 15:00:00',
            orderPayWay: '在线支付',
            orderShipping: '普通快递'
        },
        priceInfo: {

        }
    }

    public render (): JSX.Element {
        const { logisticsInfo, userInfo, goodsInfo, orderInfo } = this.state
        return (
            <div className="receivedDetail">
                <NavBar
                    fixed={true}
                    title={<span style={{fontSize: '0.97rem', color: '#222'}}>订单详情</span>}
                />
                <div className="receivedDetail_topInfo">
                    <div>
                        <div className="receivedDetail_topInfo_leftIcon">
                            <Icon type="delivergoods" />
                            <span>等待收货</span>
                        </div>
                        <div>
                            <p>圆通快递</p>
                            <p>预计8月2日 24:00前到达</p>
                        </div>
                    </div>
                    <img src={require('../../../assets/order_detail_topbg.png')}/>
                </div>
                {/* 用户Card信息 */}
                <div className="receivedDetail_card">
                    <div className="receivedDetail_card_container">
                        <div className="receivedDetail_card_container_logistics" onClick={() => {this.gotoUrl('/My/orderLogistics/' + orderInfo.orderId)}}>
                            <div>
                                <Icon type="truck" />
                            </div>
                            <div>
                                <span>{logisticsInfo.status}</span>
                                <p className="receivedDetail_card_container_logistics_rightIcon"><Icon type="arrow_right" /></p>
                                <p className="receivedDetail_card_container_logistics_time">{logisticsInfo.time}</p>
                            </div>
                        </div>
                        <div className="receivedDetail_card_container_userInfo">
                            <Icon type="address"/>
                            <span className="receivedDetail_card_container_userName">{userInfo.userName}</span>
                            <span className="DINPro">{userInfo.userPhone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')}</span>
                        </div>
                        <div className="receivedDetail_card_container_address">
                            <p>{userInfo.userAddress}</p>
                        </div>
                    </div>
                </div>
                {/* 商品信息 */}
                <div className="receivedDetail_goodsInfo">
                    <div className="receivedDetail_goodsInfo_container">
                        <Item
                            title={
                                <div className="receivedDetail_goodsInfo_container_title">
                                    <Icon type="shop" />
                                    <span>{goodsInfo.shopName}</span>
                                </div>
                            } 
                        />
                        {
                            goodsInfo.goodsData.map((item: any, index: any) => {
                                return (
                                    <div className="receivedDetail_goodsInfo_container_goodsWrap" key={index}>
                                        <div>
                                            <Image src={require('../../../assets/shop_de.png')} />
                                        </div>
                                        <div className="receivedDetail_goodsInfo_container_goods">
                                            <div>{item.goodsName}</div>
                                            <div>{item.goodsSpecifications}</div>
                                            <div>
                                                <div>
                                                    <span>￥</span> 
                                                    <span className="DINPro">{item.goodsPrice} + {item.goodsHd}</span> 
                                                    <span className="delivergoodsDetail_goodsInfo_container_goods_hd">恒豆</span> 
                                                </div>
                                                <div>加入购物车</div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <div className="receivedDetail_goodsInfo_container_customer">
                            <Icon type="customer" />
                            <span>联系客服</span>
                        </div>
                    </div>
                </div>
                {/* 订单信息 */}
                <div className="receivedDetail_orderInfo">
                    <div className="receivedDetail_orderInfo_container">
                        <Item 
                            title={<div className="receivedDetail_orderInfo_container_itemtitle">订单编号：</div>} 
                            value={<span className="receivedDetail_orderInfo_container_itemtValue">{orderInfo.orderId}</span>} 
                        />
                        <Item 
                            title={<div className="receivedDetail_orderInfo_container_itemtitle">下单时间：</div>} 
                            value={<span className="receivedDetail_orderInfo_container_itemtValue">{orderInfo.orderCreateTime}</span>} 
                        />
                        <Item 
                            title={<div className="receivedDetail_orderInfo_container_itemtitle">支付方式</div>} 
                            value={<span className="receivedDetail_orderInfo_container_itemtValue">{orderInfo.orderPayWay}</span>} 
                        />
                        <Item 
                            title={<div className="receivedDetail_orderInfo_container_itemtitle">配送方式：</div>} 
                            value={<span className="receivedDetail_orderInfo_container_itemtValue">{orderInfo.orderShipping}</span>} 
                        />
                    </div>
                </div>
                {/* 价格信息 */}
                <div className="receivedDetail_priceInfo">
                    <div className="receivedDetail_priceInfo_container">
                        <Item 
                            title={<div className="receivedDetail_priceInfo_container_itemtitle">商品金额</div>} 
                            value={<span className="receivedDetail_priceInfo_container_itemtValue">¥ 9.00</span>} 
                        />
                        <Item 
                            title={<div className="receivedDetail_priceInfo_container_itemtitle">恒豆可抵</div>} 
                            value={<span className="receivedDetail_priceInfo_container_itemtValue">1000</span>} 
                        />
                        <Item 
                            title={<div className="receivedDetail_priceInfo_container_itemtitle">运费</div>} 
                            value={<span className="receivedDetail_priceInfo_container_itemtValue">¥ 0.00</span>} 
                        />
                        <div className="receivedDetail_priceInfo_allPrice">
                            <span>需付款：</span>
                            <span className="DINPro">￥9+1000</span>
                            <span>恒豆</span>
                        </div>
                    </div>
                </div>
                {/* 支付Bar */}
                <div className="receivedDetail_operationbar">
                    {/* <div>申请退款</div> */}
                    <Button className="receivedDetail_operationbar_buyAgainBtn">再次购买</Button>
                    <Button className="receivedDetail_operationbar_entryBtn" onClick={this.handleResaveGoods}>确认收货</Button>
                </div>
            </div>
        )
    }
    // 确认收货
    private handleResaveGoods = () => {
        msg('确认收货？').then().catch()
    }
    private gotoUrl = (url: string) => {
        this.props.history.push(url)
    }
}